<?php
  require_once('./includes/header.php');
  pr($_SESSION);
  $msg = getFlashMessage();
?>
<!------------------HEADER ENDS-------------------------->
<div class="row">
<?php
if($msg != '') {
?>
    <div class="alert alert-danger fade in">
      <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
      <p><?=$msg?></p>
    </div>
<?php
}
?>

      <div class="row">
<!----------------  FORM ------------>
<form class="form-horizontal" method="post"
enctype="multipart/form-data"
action="saveuser.php" id="signupForm" role="form" >

  <div class="form-group">
    <label  class="col-sm-3 control-label">Name</label>
    <div class="col-sm-5">
      <input type="text" value="Rasmus" autocomplete="off" class="form-control" name="uname" placeholder="Name">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Email</label>
    <div class="col-sm-5">
      <input type="email" value="<?=uniqid()?>@gmail.com" autocomplete="off" class="form-control"  name="email" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Password</label>
    <div class="col-sm-5">
      <input type="password" value="Rasmus@123" class="form-control" id="passwordId" name="password" placeholder="Password">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Confirm Password</label>
    <div class="col-sm-5">
      <input type="password" value="Rasmus@123" class="form-control" name="cpassword" placeholder="Confirm Password">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Date of Birth</label>
    <div class="col-sm-5">
      <!---<input type="date" class="form-control" name="dob" placeholder="yyyy-mm-dd"> -->

      <div class='input-group date' id='datetimepicker1' data-date-format="YYYY/MM/DD">
        <input readonly type='text' value="1999-12-09" name="dob" class="form-control" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
      <label for="dob" class="error"></label>

   </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Gender</label>
    <div class="col-sm-5">

        <label class="radio-inline">
          <input type="radio" name="gender" value="m">
          Male
        </label>

        <label class="radio-inline">
          <input type="radio" name="gender" checked  value="f">
          Female
        </label>

        <label class="error" for="gender" style="width: 100%;"></label>


    </div>
  </div>


  <div class="form-group">
    <label  class="col-sm-3 control-label">Address</label>
    <div class="col-sm-5">
      <textarea class="form-control" name="address" rows="3">Noida Sector 15</textarea>
    </div>
  </div>


  <div class="form-group">
    <label  class="col-sm-3 control-label">Country</label>
    <div class="col-sm-5">
      <select class="form-control" name="country_id" id="country_id">
        <option value="">-Select-</option>
      </select>
      <span id="loader1"></span>
      <span style="color:#0000FF;cursor:pointer;" id="click1">Click here to get countries</span>
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Languages Known</label>
    <div class="col-sm-5">
      <select multiple name="lang[]" class="form-control">
        <option value="c">C</option>
        <option selected value="cpp">C++</option>
        <option value="java">Java</option>
        <option selected value="dotnet">.NET</option>
        <option selected  value="php">PHP</option>
      </select>
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-3 control-label">Hobbies</label>
    <div class="col-sm-5">

      <div class="checkbox"><label>
        <input type="checkbox" checked name="hobbies[]" value="ck">Cricket
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="hk">Hockey
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" checked  name="hobbies[]" value="fb">Football
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="ch">Chess
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" checked name="hobbies[]" value="te">Tennis
      </label></div>

      <label for="hobbies[]" class="error"></label>

    </div>


  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Upload Avatar</label>
    <div class="col-sm-5">
      <input type="file" class="form-control" name="avatar" />
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Security Code</label>
    <div class="col-sm-5">
<!-- Captcha Start -->
<img src="captcha/captcha.php" id="captcha" /><br/>
<a href="javascript:void(0)" onclick="    document.getElementById('captcha').src='captcha/captcha.php?'+Math.random();
    document.getElementById('captcha-form').focus();"
    id="change-image">Not readable? Change text.</a><br/><br/>
<input type="text" name="captcha" id="captcha-form" /><br/>
<!-- Captcha End-->
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-5">
      <button type="submit" class="btn btn-primary">Register</button>
    </div>
  </div>


</form>

<!----------------  FORM ------------>
      </div>
<!-------------- FOOTER START --------------------------->
<?php
  require_once('./includes/footer.php');
?>
<script type="text/javascript">
  $(document).ready(function(){
    $('#click1').on('click',function(){
      getCountry();
    })

    function getCountry()
    {
      $.ajax({
        url : 'ajax/countries.php',
        data : {'uname':'vikas','age':45},
        type : 'post',
        dataType : 'json',
        beforeSend : function(){
          jQuery('#loader1').html('<img src="img/loading.gif">');
        },
        success : function(data){
          var option = '<option value="">-SELECT-</option>';
          $.each(data,function(i,j){
            option += '<option value="'+i+'">'+j+'</option>';
          });
          jQuery('#country_id').html(option);
                  },
        complete :  function(){
          jQuery('#loader1').html('');
        }
      });
    }
  });
</script>
